<style lang="less">
    @import './own-space.less';
</style>

<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="person"></Icon>
                个人信息
            </p>
            <div>
                <Form 
                    ref="userForm"
                    :model="userForm" 
                    :label-width="100" 
                    label-position="right"
                    :rules="inforValidate"
                >
                  <div style="margin: 0 0 30px 30px; display:flex;">
										<Tag color="blue">用户姓名</Tag>
										<span>{{userName}}</span>
									</div>
                    <div>
                        <Button type="info" style="width: 100px; margin-left:30px;" :loading="save_loading" @click="showEditPassword">修改密码</Button>
                    </div>
                </Form>
            </div>
        </Card>
        <Modal v-model="editPasswordModal" :closable='false' :mask-closable=false :width="500">
            <h3 slot="header" style="color:#2D8CF0">修改密码</h3>
            <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right" :rules="passwordValidate">
                <FormItem label="原密码" prop="oldPass" :error="oldPassError">
                    <Input v-model="editPasswordForm.oldPass" placeholder="请输入现在使用的密码" 
										:type="changePassProp[0].type"
										:icon="changePassProp[0].icon"
										@on-click="handlechangePassProp(0)"></Input>
                </FormItem>
                <FormItem label="新密码" prop="newPass">
                    <Input v-model="editPasswordForm.newPass" placeholder="请输入新密码，至少6位字符" 
										:icon="changePassProp[1].icon" 
										:type="changePassProp[1].type"
										@on-click="handlechangePassProp(1)"></Input>
                </FormItem>
                <FormItem label="确认新密码" prop="rePass">
                    <Input v-model="editPasswordForm.rePass" placeholder="请再次输入新密码" 
										:type="changePassProp[2].type" 
										:icon="changePassProp[2].icon"
										@on-click="handlechangePassProp(2)"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelEditPass">取消</Button>
                <Button type="primary" :loading="savePassLoading" @click="saveEditPass">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import md5 from 'js-md5';
import {HOST} from '../../libs/config.js';
import querystring from 'querystring';
import { loginInvalid } from "../../libs/loginInvalidNotice.js";
export default {
    name: 'ownspace_index',
    data () {

        const valideRePassword = (rule, value, callback) => {
            if (value !== this.editPasswordForm.newPass) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        };
        return {
            userForm: {
                name: '',
						},
						changePassProp:[
							{
								icon: 'eye-disabled',
								type: 'password'
							},
							{
								icon: 'eye-disabled',
								type: 'password'
							},
							{
								icon: 'eye-disabled',
								type: 'password'
							}
						],
            uid: '', // 登录用户的userId
            save_loading: false,
            editPasswordModal: false, // 修改密码模态框显示
            savePassLoading: false,
            oldPassError: '',
            checkIdentifyCodeLoading: false,
            inforValidate: {
                name: [
                    { required: false, message: '请输入姓名', trigger: 'blur' }
                ]
            },
            editPasswordForm: {
                oldPass: '',
                newPass: '',
                rePass: ''
            },
            passwordValidate: {
                oldPass: [
                    { required: true, message: '请输入原密码', trigger: 'blur' }
                ],
                newPass: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, message: '请至少输入6个字符', trigger: 'blur' },
                    { max: 32, message: '最多输入32个字符', trigger: 'blur' }
                ],
                rePass: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur' },
                    { validator: valideRePassword, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        getIdentifyCode () {
            this.hasGetIdentifyCode = true;
            this.$refs['userForm'].validate((valid) => {
                if (valid) {
                    this.canGetIdentifyCode = true;
                    let timeLast = 60;
                    let timer = setInterval(() => {
                        if (timeLast >= 0) {
                            this.gettingIdentifyCodeBtnContent = timeLast + '秒后重试';
                            timeLast -= 1;
                        } else {
                            clearInterval(timer);
                            this.gettingIdentifyCodeBtnContent = '获取验证码';
                            this.canGetIdentifyCode = false;
                        }
                    }, 1000);
                    this.inputCodeVisible = true;
                    // you can write ajax request here
                }
            });
        },
        showEditPassword () {
						this.editPasswordModal = true;

        },
        cancelEditPass () {
            this.editPasswordModal = false;
        },
        saveEditPass () {
            this.$refs['editPasswordForm'].validate((valid) => {
                if (valid) {
									this.savePassLoading = true;
                    // you can write ajax request here
									this.$axios.post(HOST + '/user/changePw',
										querystring.stringify({
											'old_password': md5(this.editPasswordForm.oldPass + 'gongxun'),
											'new_password': md5(this.editPasswordForm.newPass + 'gongxun')
										}),
										{
											withCredentials: true
										}
									)
									.then((response) => {
											this.savePassLoading = false;
											if (response.data.status === 'success') {
												this.editPasswordModal = false;
												this.$Message.success(`密码修改成功！
												登录状态失效请重新登录`);
												setTimeout(() => {
													this.$store.commit('logout', this);
													this.$store.commit('clearOpenedSubmenu');
													this.$store.commit('clearAllTags');
													this.$router.push({
														name: 'login'
													});
												}, 3000)
											} else {
												this.$Message.success('密码修改失败！');
											}
									})
									.then((err) => {

									})


                    
                }
            });
        },

				handlechangePassProp(index) {
					if (this.changePassProp[index].type === 'password') {
						this.changePassProp[index].type = 'text';
						this.changePassProp[index].icon = 'eye';
					} else {
						this.changePassProp[index].type = 'password';
						this.changePassProp[index].icon = 'eye-disabled';
					}
				}
    },
    mounted () {
    },
    computed: {
        userName() {
            return this.$store.state.app.name;
        }
    }
};
</script>
